<template>
  <el-col :span="24">
    <el-card class="box-card" shadow="never" v-for="a in cardlist" :key="a.id">
      <div slot="header" class="clearfix">
        <span class="card-ht">
          {{ a.title }}<span class="text">更多>></span></span
        >
      </div>
      <ul class="item">
        <li v-for="a2 in a.subclass" :key="a2.label">
          <span> {{ a2.label }}</span>
          <span class="fr">{{ a2.date }}</span>
        </li>
      </ul>
    </el-card>
  </el-col>
</template>

<script>
export default {
  props: {
    cardlist: {
      type: Array
    }
  },
  data() {
    return {}
  }
}
</script>

<style lang="less" scoped>
.el-card {
  border: none;
}
.header {
  border-bottom: 2px solid #ccc !important;
  height: 45px;
}
/deep/ .el-card__header,
/deep/.el-card__body {
  padding: 0;
}
.card-ht {
  display: inline-block;
  font-weight: 700;
  font-size: 16px;
  height: 60px;
  width: 100%;
  border-bottom: 2px solid #ccc;
  line-height: 80px;
}
.text {
  float: right;
}
.item li {
  list-style-type: square !important;
  height: 45px;
  line-height: 45px;
  border-bottom: 1px dashed #ccc;
  &:hover {
    color: red;
    border-bottom: 1px dashed red;
  }
}
.fr {
  float: right !important;
  font-size: 12px;
  font-size: 12px;
}
</style>
